<template>
  <common-list-group class="report-component-wrap">
    <template v-if="flowAnalysisDiv">
      <flow-analysis
        :path="analysisPath"
        :id="analysisId"
        @changeFlowAnalysisDiv="changeFlowAnalysisDiv"
      />
    </template>
    <template v-else>
      <div slot="group" class="group-list-component-wrap">
        <common-tree
          ref="treeRef"
          :is-slot="true"
          :isRequest="isRequest"
          :treeLoading="treeLoading"
          :tree-data="applitionTreeData"
          :tree-prop="{ label: 'orgName' }"
          search-placeholder="查询分类或者应用名称"
          :current-node-key="currentNodeKey"
          nodeKey="orgId"
          @handleNodeClick="handleTreeNodeClick"
        >
          <div slot-scope="{ scope }" class="tree-item-wrap">
            <common-carousel-text
              :content="scope.data.orgName"
              :font-size="14"
            />
            <el-popover
              v-if="
                (scope.data.isDefault !== '1' || scope.node.level === 1) &&
                (scope.data.type === '0' ||
                  (scope.node.level > 1 &&
                    (isAdmin || scope.data.createBy === name)))
              "
              popper-class="chart-type-list-popover"
              placement="right-start"
              width="150"
              trigger="hover"
            >
              <commonIcon
                iconName="icon-more"
                slot="reference"
                iconType="icon"
                :iconSize="16"
              ></commonIcon>
              <common-menu>
                <common-menu-item
                  v-if="scope.data.type === '0'"
                  @click="addType(scope.data)"
                  >新增子分类
                </common-menu-item>
                <div v-if="isAdmin || scope.data.createBy === name">
                  <common-menu-item
                    v-if="scope.data.type === '0'"
                    @click="addApplication(scope.data)"
                    >应用管理
                  </common-menu-item>
                  <common-menu-item
                    v-if="scope.data.type === '0'"
                    @click="editType(scope.data)"
                    >重命名
                  </common-menu-item>
                  <common-menu-item
                    v-if="scope.node.level > 1"
                    @click="handleDeleteTree(scope.data)"
                    >{{ scope.data.type === "0" ? "删除" : "解绑" }}
                  </common-menu-item>
                </div>
              </common-menu>
            </el-popover>
          </div>
        </common-tree>
      </div>
      <common-search slot="search" @search="handleQuery" @reset="resetQuery">
        <el-form
          @submit.native.prevent
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          v-show="showSearch"
          label-width="65px"
        >
          <!-- <el-form-item label="应用名称" prop="aplManageId">
            <el-select style="width: 100%" v-model="queryParams.aplManageId" filterable clearable v-loadmore="loadMore"
              remote reserve-keyword @focus="focus" @blur="blur" :remote-method="remoteMethod" :loading="selectLoading">
              <el-option v-for="(item, index) in initDataList" :key="index" :label="item.applicationName"
                :value="item.id" :disabled="item.interfaceSwitch === 1 ? true : false"></el-option>
            </el-select>
          </el-form-item> -->

          <el-form-item label="数据分级" prop="queryLevelId">
            <el-select
              v-model="queryParams.queryLevelId"
              filterable
              clearable
              remote
              reserve-keyword
              :loading="loading"
            >
              <el-option label="全部" :value="null"></el-option>
              <el-option
                v-for="item in queryLevelList"
                :key="item.levelId"
                :label="item.name"
                :value="item.levelId"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="数据分类" prop="queryTypeId">
            <el-cascader
              v-model="queryParams.queryTypeId"
              :options="dataTypeList"
              :props="cascaderProps"
              clearable
            >
            </el-cascader>
          </el-form-item>
          <el-form-item label="敏感字段" prop="querySensitiveId">
            <el-select
              v-model="queryParams.querySensitiveId"
              filterable
              remote
              reserve-keyword
              :loading="loading"
              clearable
            >
              <el-option label="全部" :value="null"></el-option>
              <el-option
                v-for="item in querySensitiveList"
                :key="item.wordId"
                :label="item.name"
                :value="item.wordId"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="重要数据" prop="queryTagId">
            <el-select
              v-model="queryParams.queryTagId"
              filterable
              clearable
              remote
              reserve-keyword
              :loading="loading"
            >
              <el-option label="全部" :value="null"></el-option>
              <el-option
                v-for="item in queryTagList"
                :key="item.tagId"
                :label="item.tagName"
                :value="item.tagId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="来源标识" prop="passSource">
            <el-select v-model="queryParams.passSource">
              <el-option label="全部" :value="null"></el-option>
              <el-option label="旁路" value="旁路" />
              <el-option label="网关" value="网关" />
              <el-option label="手工添加" value="手工添加" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select
              v-model="queryParams.status"
              remote
              reserve-keyword
              :remote-method="listSensitive"
              :loading="loading"
            >
              <el-option label="全部" :value="null"></el-option>
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <!-- <el-form-item label="敏感数据" prop="ruleId">
          <el-select
            v-model="queryParams.ruleId"
            filterable
            remote
            reserve-keyword
            :loading="loading"
          >
            <el-option label="全部" :value="null"></el-option>
            <el-option
              v-for="item in listSensitArr"
              :key="item.id"
              :label="item.ruleName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
          <el-form-item label="方法" prop="method">
            <el-select v-model="queryParams.method" clearable>
              <el-option label="全部" :value="null"></el-option>
              <el-option label="get" value="get" />
              <el-option label="post" value="post" />
              <el-option label="put" value="put" />
              <el-option label="delete" value="delete" />
            </el-select>
          </el-form-item>
          <el-form-item label="URL" prop="url">
            <common-input
              :maxlength="256"
              :verify="false"
              v-model="queryParams.url"
              clearable
              @enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="数据类型" prop="flagSensitive">
            <el-select v-model="queryParams.flagSensitive" clearable>
              <el-option label="全部" :value="null" />
              <el-option label="敏感字段" value="0" />
              <el-option label="重要数据" value="1" />
            </el-select>
          </el-form-item>

          <!--          <el-form-item label="资产分组" prop="domainId">
            <el-select v-model="queryParams.domainId">
              <el-option label="全部" :value="null" />
              <el-option
                v-for="(item, index) in datachildren"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>-->
          <!-- <el-form-item label="访问路径" prop="path">
            <common-input v-model="queryParams.path" clearable  />
          </el-form-item> -->
          <!-- <el-form-item label="敏感数据" prop="query">
            <common-input v-model="queryParams.query" clearable/>
          </el-form-item> -->
          <!-- <el-form-item label="Ip" prop="domain">
            <common-input v-model="queryParams.domain" clearable />
          </el-form-item>
          <el-form-item label="端口" prop="port">
            <common-input v-model="queryParams.port" clearable />
          </el-form-item> -->
        </el-form>
      </common-search>

      <el-row slot="tools" :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            @click="handleAdd"
            v-hasPermi="['apisecurity:apiinterface:add']"
            >注册
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-download"
            @click="importShow"
            v-hasPermi="['apisecurity:apiinterface:import']"
            >导入
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-upload2"
            :loading="exportLoading"
            @click="handleExport"
            v-hasPermi="['apisecurity:apiinterface:import']"
            >导出
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            plain
            icon="el-icon-top"
            :disabled="multiple"
            @click="batchEdit('', 1)"
            v-hasPermi="['apisecurity:apiinterface:batchEdit']"
            >批量上线
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            plain
            icon="el-icon-bottom"
            :disabled="multiple"
            @click="batchEdit('', 0)"
            v-hasPermi="['apisecurity:apiinterface:batchEdit']"
            >批量下线
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['apisecurity:apiinterface:remove']"
            >批量删除
          </el-button>
        </el-col>

        <el-col :span="1.5">
          <el-button
            plain
            type="primary"
            icon="el-icon-s-check"
            :disabled="multiple"
            @click="HandleDistributeOrg"
            v-hasPermi="['apisecurity:apiinterface:distribution']"
            >分配组织
          </el-button>
        </el-col>
      </el-row>
      <common-table
        slot="content"
        v-loading="loading"
        :data="interfaceList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55px"
          fixed="left"
          align="center"
        />
        <el-table-column
          label="应用名称"
          align="left"
          fixed="left"
          prop="applicationValue"
          show-overflow-tooltip
          width="200px"
        />
        <el-table-column
          label="URL"
          align="left"
          prop="url"
          show-overflow-tooltip
          width="280px"
        >
        </el-table-column>
        <el-table-column
          label="敏感字段"
          align="left"
          prop="querySensitive"
          show-overflow-tooltip
          width="220px"
        >
          <template slot-scope="scope">
            <common-table-tag
              :data="scope.row.querySensitive"
              :index="scope.$index"
              isHot
            ></common-table-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="数据分级"
          align="left"
          prop="queryLevel"
          show-overflow-tooltip
          width="160px"
        />
        <el-table-column
          label="数据类别"
          align="left"
          prop="queryType"
          show-overflow-tooltip
          width="180px"
        />

        <el-table-column
          label="重要数据"
          align="left"
          prop="queryTag"
          show-overflow-tooltip
          width="100px"
        />

        <el-table-column
          label="请求敏感字段"
          align="left"
          prop="querySensitiveReq"
          width="110px"
          show-overflow-tooltip
        />
        <el-table-column label="活跃状态" align="center" width="100px">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.isActive === 1"
              type="danger"
              plain
              size="mini"
              >失活
            </el-tag>
            <el-tag
              v-if="scope.row.isActive === 0"
              type="primary"
              plain
              size="mini"
              >活跃
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" width="100px">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.status === 1"
              type="primary"
              plain
              size="mini"
              >已上线
            </el-tag>
            <el-tag
              v-if="scope.row.status === 0"
              type="warning"
              plain
              size="mini"
              >已下线
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="left" width="175px" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="scope.row.status === 1"
              @click="batchEdit(scope.row, 0)"
              v-hasPermi="['apisecurity:apiinterface:batchEdit']"
              >下线
            </el-button>
            <el-button
              type="text"
              v-if="scope.row.status === 0"
              @click="batchEdit(scope.row, 1)"
              v-hasPermi="['apisecurity:apiinterface:batchEdit']"
              >上线
            </el-button>

            <el-button
              type="text"
              @click="handleBatchTrafficAnalysis(scope.row)"
              v-hasPermi="['apisecurity:apiinterface:analysis']"
              >分析
            </el-button>
            <el-button
              type="text"
              @click="currentLimiting(scope.row)"
              v-hasPermi="['apisecurity:apiinterface:limitflow']"
              >限流
            </el-button>
            <el-dropdown @command="moreTool(scope.row, $event)">
              <span
                class="el-dropdown-link"
                style="cursor: pointer; margin-left: 8px; font-size: 12px"
                v-hasPermi="[
                  'apisecurity:apiinterface:manualReview',
                  'apisecurity:apiinterface:query',
                  'apisecurity:apiinterface:edit',
                  'apisecurity:apiinterface:remove',
                ]"
              >
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown" class="size">
                <el-dropdown-item
                  command="manualEdit"
                  v-hasPermi="['apisecurity:apiinterface:manualReview']"
                >
                  人工确定
                </el-dropdown-item>
                <el-dropdown-item command="viewSensitive">
                  敏感样例
                </el-dropdown-item>
                <el-dropdown-item
                  command="viewDetail"
                  v-hasPermi="['apisecurity:apiinterface:query']"
                >
                  访问详情
                </el-dropdown-item>
                <el-dropdown-item command="queryInfo"> 详情 </el-dropdown-item>
                <el-dropdown-item
                  command="edit"
                  v-hasPermi="['apisecurity:apiinterface:edit']"
                >
                  编辑
                </el-dropdown-item>
                <el-dropdown-item
                  command="delete"
                  v-hasPermi="['apisecurity:apiinterface:remove']"
                  >删除
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </common-table>
      <pagination
        slot="pagination"
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </template>
    <!-- 人工确定 -->

    <common-edit-dialog
      title="人工确定"
      :visible.sync="manualOpen"
      @cancel="cancel"
      @submit="manualsubmit"
      class="manualDialog"
      :buttonLoading="manualLoading"
    >
      <el-form
        :model="manualForm"
        ref="manualForm"
        :rules="manualRules"
        label-width="160px"
        @submit.native.prevent
      >
        <el-form-item label="编辑前的敏感字段" class="manualClass">
          {{ manualForm.interfaceSensitiveRuleList }}</el-form-item
        >

        <el-form-item label="敏感类型" prop="manualType" class="manualClass">
          <template>
            <el-radio v-model="manualForm.manualType" label="0"
              >非敏感字段</el-radio
            >
            <el-radio v-model="manualForm.manualType" label="1"
              >敏感字段</el-radio
            >
          </template>
        </el-form-item>

        <el-form-item
          label="编辑后的敏感字段"
          prop="manualInterfaceSensitiveRuleList"
          v-if="manualForm.manualType === '1' ? true : false"
          style="margin-bottom: 18px"
          class="manualClass"
        >
          <el-select
            v-model="manualForm.manualInterfaceSensitiveRuleList"
            multiple
            filterable
          >
            <el-option
              v-for="item in querySensitiveList"
              :key="item.wordId"
              :label="item.name"
              :value="item.wordId"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="编辑前的重要数据" class="manualClass">
          {{ manualForm.interfaceDataTagsList }}</el-form-item
        >

        <el-form-item label="重要数据类型" prop="manualTag" class="manualClass">
          <template>
            <el-radio v-model="manualForm.manualTag" label="0"
              >非重要数据</el-radio
            >
            <el-radio v-model="manualForm.manualTag" label="1"
              >重要数据</el-radio
            >
          </template>
        </el-form-item>

        <el-form-item
          label="编辑后的重要数据字段"
          prop="manualInterfaceTagsList"
          v-if="manualForm.manualTag === '1' ? true : false"
          style="margin-bottom: 18px"
          class="manualClass"
        >
          <el-select v-model="manualForm.manualInterfaceTagsList" multiple>
            <el-option
              v-for="item in this.queryTagList"
              :key="item.tagdId"
              :label="item.tagName"
              :value="item.tagId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </common-edit-dialog>

    <!-- 添加或编辑资产对话框 -->
    <common-edit-dialog
      :title="title"
      :visible.sync="open"
      @cancel="cancel"
      @submit="submitForm"
      :buttonLoading="buttonLoading"
      :info-loading="infoUpdateLoading"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="90px"
        @submit.native.prevent
      >
        <el-row :gutter="18">
          <el-col :span="12" v-show="false">
            <el-form-item label="厂商编码" prop="manuCode">
              <common-input v-model="form.manuCode" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-show="false">
            <el-form-item label="系统编码" prop="systemCode">
              <common-input v-model="form.systemCode" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <!--          <el-col :span="12">
            <el-form-item
              label="资产分组"
              prop="domainId"
              :rules="rules.domainId"
            >
              <el-select v-model="form.domainId" placeholder="请选择" clearable>
                <el-option
                  v-for="item in assetGroupArr"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>-->
          <el-col :span="12" v-show="false">
            <el-form-item label="数据分级" prop="queryLevel">
              <el-select
                v-model="form.queryLevel"
                filterable
                remote
                reserve-keyword
                :loading="loading"
              >
                <el-option
                  v-for="item in queryLevelList"
                  :key="item.levelId"
                  :label="item.name"
                  :value="item.levelId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-show="false">
            <el-form-item label="数据分类" prop="queryType">
              <el-select
                v-model="form.queryType"
                filterable
                remote
                reserve-keyword
                :loading="loading"
              >
                <el-option
                  v-for="item in queryTypeList"
                  :key="item.typeId"
                  :label="item.typeName"
                  :value="item.typeId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-show="false">
            <el-form-item label="重要数据" prop="queryTag">
              <el-select
                v-model="form.queryTag"
                filterable
                remote
                multiple
                reserve-keyword
                :loading="loading"
              >
                <el-option
                  v-for="item in queryTagList"
                  :key="item.tagId"
                  :label="item.tagName"
                  :value="item.tagId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-show="false">
            <el-form-item label="敏感字段" prop="querySensitive">
              <el-select
                v-model="form.querySensitive"
                filterable
                remote
                multiple
                reserve-keyword
                :loading="loading"
              >
                <el-option
                  v-for="item in querySensitiveList"
                  :key="item.wordId"
                  :label="item.name"
                  :value="item.wordId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="方法" prop="method" :rules="rules.method">
              <el-select
                v-model="form.method"
                placeholder="请选择"
                :disabled="isDisabled"
                clearable
              >
                <el-option label="get" value="get" />
                <el-option label="post" value="post" />
                <el-option label="put" value="put" />
                <el-option label="delete" value="delete" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="参数格式"
              prop="contentType"
              :disabled="isDisabled"
              :rules="rules.contentType"
            >
              <el-select
                v-model="form.contentType"
                placeholder="请选择"
                :disabled="isDisabled"
                clearable
              >
                <el-option
                  v-for="item in parameterFormatData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="URL" prop="url" :rules="rules.url">
              <common-input
                :verify="false"
                type="textarea"
                :disabled="isDisabled"
                v-model="form.url"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="应用名称"
              prop="applicationValue"
              :rules="rules.applicationValue"
            >
              <choose-dialog
                @submitDialog="submitDialog"
                @clearInfo="clearInfo"
                :selectId="form.applicationValue"
                :selectName="form.showApplicationName"
                :disabled="false"
              ></choose-dialog>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="认证接口" prop="auth">
              <el-radio-group v-model="form.auth" :disabled="isDisabled">
                <el-radio :label="0">是</el-radio>
                <el-radio :label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="form.id">
            <el-form-item label="敏感数据接口" prop="type">
              <el-radio-group v-model="form.type" disabled>
                <el-radio :label="1">敏感</el-radio>
                <el-radio :label="0">正常</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="参数" prop="paramList">
              <div
                class="paramsList"
                :class="{ isDisabled: isDisabled }"
                v-for="(item, i) in addParamsArr"
                :key="i"
              >
                <common-input
                  v-model="paramValue[i]"
                  class="input-with-select"
                  placeholder="请输入"
                  :disabled="isDisabled"
                >
                  <el-select
                    style="width: 100px"
                    v-model="paramType[i]"
                    slot="prepend"
                    :disabled="isDisabled"
                    placeholder="请选择"
                    clearable
                  >
                    <!-- <el-option label="请选择" value="null" /> -->
                    <el-option label="长整型" value="longInt" />
                    <el-option label="数值型" value="number" />
                    <el-option label="字符型" value="varchar" />
                    <el-option label="整型" value="int" />
                  </el-select>
                </common-input>
                <el-button
                  v-if="butOpen"
                  :disabled="isDisabled"
                  class="delectCurrentParam"
                  @click="deleteParamsFn(i)"
                  style="margin-left: 8px; font-size: 12px"
                  type="danger"
                  plain
                  >删除
                </el-button>
                <el-button
                  class="delectCurrentParam"
                  type="primary"
                  v-if="i === 0"
                  @click="addParamsFn"
                  :disabled="isDisabled"
                  style="margin-left: 8px; font-size: 12px"
                  plain
                  >新增
                </el-button>
              </div>
            </el-form-item>
          </el-col>

          <!-- <el-form-item label="参数" prop="query">
          <common-input v-model="form.query" placeholder="请输入参数" />
        </el-form-item>
        <el-form-item label="接口名称" prop="apiName">
          <common-input v-model="form.apiName" placeholder="请输入接口名称" />
        </el-form-item> -->

          <!-- <el-form-item label="业务域" prop="domainId">
          <common-input v-model="form.domainId" placeholder="请输入业务域" />
        </el-form-item> -->
          <el-col :span="24">
            <el-form-item label="描述" prop="description">
              <common-input
                v-model="form.description"
                :disabled="isDisabled"
                type="textarea"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <el-form-item label="指纹" prop="fingerprint">
          <common-input v-model="form.fingerprint" placeholder="请输入指纹" />
        </el-form-item>
        <el-form-item label="状态。1、上线 0、下线">
          <el-radio-group v-model="form.status">
            <el-radio label="1">请选择字典生成</el-radio>
          </el-radio-group>
        </el-form-item> -->
      </el-form>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div> -->
    </common-edit-dialog>

    <!-- 详情页 -->
    <common-info-dialog
      :title="detailsTitle"
      :visible.sync="detailsOpen"
      @cancel="cancel"
      :infoLoading="infoLoading"
    >
      <common-info-table>
        <!--        <common-info-table-cell label="资产分组" width="50%">
          {{ matchingFn(form.domainId) }}
        </common-info-table-cell>-->
        <common-info-table-cell label="敏感字段" width="50%">
          {{ form.querySensitive }}
        </common-info-table-cell>
        <common-info-table-cell label="数据分级" width="50%">
          {{ form.queryLevel }}
        </common-info-table-cell>
        <common-info-table-cell label="数据分类" width="50%">
          {{ form.queryType }}
        </common-info-table-cell>
        <common-info-table-cell label="重要数据" width="50%">
          {{ form.queryTag }}
        </common-info-table-cell>
        <common-info-table-cell label="请求敏感字段" width="50%">
          {{ form.querySensitiveReq }}
        </common-info-table-cell>

        <common-info-table-cell label="当日访问量" width="50%">
          {{ form.currentVisits }}
        </common-info-table-cell>

        <common-info-table-cell label="应用名称">
          {{ form.applicationValue }}
        </common-info-table-cell>
        <common-info-table-cell label="所属分类">
          {{ form.ancestors }}
        </common-info-table-cell>
        <common-info-table-cell label="url">
          {{ url }}
        </common-info-table-cell>
        <common-info-table-cell label="组织">
          {{ form.deptName }}
        </common-info-table-cell>
        <common-info-table-cell label="负责人" width="50%">
          {{ form.principal }}
        </common-info-table-cell>
        <common-info-table-cell label="手机号" width="50%">
          {{ form.phone }}
        </common-info-table-cell>
        <!--        <common-info-table-cell label="敏感标识">-->
        <!--          {{ formateFn(form.interfaceSensitiveRelList, "sensitiveRuleName") }}-->
        <!--        </common-info-table-cell>-->
        <common-info-table-cell label="方法" width="50%">
          {{ form.method }}
        </common-info-table-cell>
        <common-info-table-cell label="敏感数据接口" width="50%">
          {{ form.type === 1 ? "敏感" : form.type === 0 ? "正常" : "无" }}
        </common-info-table-cell>
        <common-info-table-cell label="认证接口" width="50%">
          {{ form.auth === 1 ? "否" : form.auth === 0 ? "是" : "" }}
        </common-info-table-cell>
        <common-info-table-cell label="来源标识" width="50%">
          {{ form.passSource }}
        </common-info-table-cell>
        <common-info-table-cell label="参数格式" width="50%">
          {{ form.contentTypeName }}
        </common-info-table-cell>
        <common-info-table-cell label="识别方式" width="50%">
          {{ form.distinguishStyle === 0 ? "自动识别" : "人工确认" }}
        </common-info-table-cell>
        <common-info-table-cell label="参数">
          <div class="paramsList" v-for="(item, i) in addParamsArr" :key="i">
            <span>{{ paramTypeObj[paramType[i]] }}</span
            ><span>{{ paramValue[i] }}</span>
          </div>
        </common-info-table-cell>
        <common-info-table-cell label="描述">
          {{ form.description }}
        </common-info-table-cell>
      </common-info-table>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div> -->
    </common-info-dialog>

    <common-upload-dialog
      download-path="system/downFileByemplateName"
      upload-path="/system/apiinterface/importData"
      template-name="apiTemplate.xls"
      report-path="apisecurity/apiinterface/downErrorReportByemplateName"
      ref="uploadDialog"
      :getList="getList"
    />
    <!--    <common-edit-dialog
      :title="batchUpdateTitle"
      :visible.sync="batchUpdateOpen"
      @cancel="cancel"
      @submit="batchSubmission"
    >
      <el-form
        ref="batchUpdateForm"
        :model="batchUpdateForm"
        :rules="rules"
        label-width="120px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="分组名称" prop="domainId">
              <el-select
                v-model="batchUpdateForm.domainId"
                placeholder="请选择分组"
              >
                <el-option
                  v-for="(item, id) in datachildren"
                  :key="id"
                  :label="item.label"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </common-edit-dialog>-->
    <!--    限流-->
    <common-edit-dialog
      title="限流"
      :visible="isVisible"
      @cancel="closeDialog"
      @submit="Limitsubmit"
      :buttonLoading="limitLoading"
      width="400px"
    >
      <el-form ref="LimitForm" :model="LimitForm" :rules="rules">
        <el-form-item label="状态" prop="isLimitFlow" label-width="60px">
          <el-switch
            v-model="LimitForm.isLimitFlow"
            active-value="0"
            @change="isLimitFlowChange(LimitForm.isLimitFlow)"
            inactive-value="1"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="限流值" prop="limitFlow" label-width="60px">
          <el-input
            :disabled="LimitForm.isLimitFlow === '1'"
            v-model.number="LimitForm.limitFlow"
            placeholder="请输入"
            :maxlength="9"
            style="width: 120px"
          />
        </el-form-item>
      </el-form>
    </common-edit-dialog>

    <distribute-org
      ref="distributeOrg"
      :dialogShow="dialogShow"
      :buttonLoading="submitOrgLoading"
      :deptSelectArr="deptSelectArr"
      @toSubmit="toDistributeOrg"
      @close="dialogShow = false"
    />

    <sensitive-example ref="sensitiveExample" />

    <url-detail v-if="urlDetailShow" @back="goBackUrl" :detailUrl="detailUrl" />

    <!-- 应用 多选弹窗 -->
    <choose-multiple ref="chooseMultiple" @refresh="refresh"></choose-multiple>

    <!-- 新增/编辑子分类弹窗 -->

    <common-edit-dialog
      :title="`${isTypeEdit ? '重命名' : '新增子分类'}`"
      :visible="isTypeDialog"
      :button-loading="dialogLoading"
      @cancel="cancelTypeForm"
      @submit="submitTypeForm"
      width="25%"
    >
      <el-form
        ref="typeForm"
        :model="typeForm"
        :rules="typeRule"
        label-width="80px"
        @submit.native.prevent
      >
        <el-form-item label="分类名称" prop="orgName">
          <common-input
            :maxlength="20"
            v-model="typeForm.orgName"
          ></common-input>
        </el-form-item>
      </el-form>
    </common-edit-dialog>
  </common-list-group>
</template>

<script>
import {
  listInterface,
  getInterface,
  delInterface,
  addInterface,
  updateInterface,
  treeselect,
  getSensitiveRule,
  batchEdit, //批量分组
  batchUpdate,
  listSensitive,
  querySensitiveList,
  getIp,
  queryTagList,
  manualReview,
  queryTypeList,
  queryLevelList,
  queryDataTypeTreeList,
  limitFlow,
  updateDeptId,
} from "@/api/apisecurity/apiinterface/interface";
import { deepClone } from "@/utils";

import Treeselect from "@riophae/vue-treeselect";
import { getTokenDecrypt } from "@/utils/auth";
import flowAnalysis from "./flowAnalysis.vue";
import BaseList from "@/mixins/BaseList";
import { listLication } from "@/api/apisecurity/application/lication";
import loginVue from "../../login.vue";
import { number } from "echarts";
import { MessageBox } from "element-ui";
import { getSingleArray, getFullDept } from "@/utils/util";
import DistributeOrg from "../../apisecurity/application/components/distributeOrg.vue";
import SensitiveExample from "./components/sensitiveExample.vue";
import UrlDetail from "./components/urlDetail.vue";
import { validateURL } from "@/utils/formValidates";
import { selectListByUrl } from "@/api/apisecurity/desensitization/desensitization";
import ChooseDialog from "./components/chooseDialog.vue";
import { decode, encode } from "@/utils/aesUtils";
import Utils from "@/utils";
import { list } from "@/api/apisecurity/applicationType/applicationType";
import Index from "./mixin/index";
import commonIcon from "@/components/CommonIcon";
import ChooseMultiple from "./components/chooseMultiple.vue";
import { mapGetters } from "vuex";

export default {
  name: "Http",
  mixins: [BaseList, Index],
  components: {
    Treeselect,
    flowAnalysis,
    DistributeOrg,
    SensitiveExample,
    UrlDetail,
    ChooseDialog,
    commonIcon,
    ChooseMultiple,
  },
  data() {
    return {
      showApplicationName: "",
      exportLoading: false,
      dialogShow: false,
      submitOrgLoading: false,
      urlDetailShow: false,
      detailUrl: "",
      manualLoading: false,
      singleDeptList: [],
      currentParent: 3,
      infoUpdateLoading: false,
      infoLoading: false,
      dataTypeList: [],
      cascaderProps: {
        label: "typeName",
        value: "typeId",
        emitPath: false,
      },
      url: "",
      butOpen: false,
      isVisible: false,
      LimitForm: {
        isLimitFlow: "0",
        limitFlow: 1,
        id: null,
      },

      props: { multiple: true },
      aplManageId: "",
      serverId: "",
      assetGroup: null,
      manualOpen: false,
      listSensitArr: [],
      flowAnalysisDiv: false,
      analysisPath: "",
      analysisId: "",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      selectionArr: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示查询条件
      showSearch: true,
      // 总条数
      total: 0,
      // 资产表格数据
      interfaceList: [],
      // 弹出层标题
      title: "",
      // 资产分组树
      deptOptions: undefined,
      // 资产分组名称
      assetGroupName: undefined,
      assetGroupArr: [],
      // 敏感标识下来
      sensitiveRuleArr: [],
      paramType: [],
      paramValue: [],
      paramTypeObj: {
        longInt: "长整型",
        number: "数值型",
        varchar: "字符型",
        int: "整型",
      },
      defaultProps: {
        children: "children",
        label: "label",
      },
      manualId: null,
      // 是否显示弹出层
      open: false,
      batchUpdateOpen: false,
      // 是否显示详情弹出层
      detailsOpen: false,
      batchUpdateTitle: "",
      detailsTitle: "",
      // 新增参数默认一条
      addParamsArr: [1],
      datachildren: [],
      queryTagList: [],
      queryTypeList: [],
      queryLevelList: [],
      // 查询参数
      querySensitiveList: [],
      applicationList: [],
      listLicationList: [],
      manualForm: {
        manualInterfaceSensitiveRuleList: null,
        interfaceSensitiveRuleList: null,
        manualInterfaceTagsList: null,
        interfaceDataTagsList: null,
        manualType: null,
        manualTag: null,
      },
      queryParams: {
        deptIds: null,
        pageNum: 1,
        pageSize: 10,
        serverId: [],
        manuCode: null,
        flagSensitive: null,
        systemCode: null,
        path: null,
        schema: null,
        passSource: null,
        domain: null,
        port: null,
        query: null,
        apiName: null,
        domainId: null,
        ruleId: null,
        description: null,
        auth: null,
        method: null,
        fingerprint: null,
        status: null,
        querySensitiveId: null,
        queryTagId: null,
        queryLevelId: null,
        queryTypeId: null,
        applicationValue: null,
        url: null,
      },
      // 表单参数
      form: {
        auth: 0,
        url: null,
        applicationValue: "",
        querySensitive: null,
        queryTag: null,
        queryLevel: null,
        querySensitiveReq: null,
        queryType: null,
        currentVisits: 0,
        deptId: null,
        ancestors: null,
        showApplicationName: null,
      },
      batchUpdateForm: {
        domainId: "",
      },
      batchUpdaterules: {
        /*  domainId: [
          { required: true, message: "请选择分组", trigger: "change" },
        ],*/
      },
      isdistinguishStyle: null,
      isdistinguishRemark: null,
      buttonLoading: false,
      limitLoading: false,
      options: [],
      distinguishStyle: null,
      // 表单校验
      manualRules: {
        manualInterfaceSensitiveRuleList: [
          { required: true, message: "请选择敏感字段", trigger: "blur" },
        ],
        manualInterfaceTagsList: [
          { required: true, message: "请选择重要数据", trigger: "blur" },
        ],
      },
      rules: {
        applicationValue: [
          { required: true, message: "请选择应用", trigger: "blur" },
        ],
        apiName: [
          { required: true, message: "请输入资产名称", trigger: "blur" },
        ],
        /* domainId: [
          { required: true, message: "请选择资产分组", trigger: "change" },
        ],*/
        url: [
          {
            required: true,
            message: "请输入URL",
            trigger: "blur",
          },
          {
            required: true,
            message: "URL格式错误",
            validator: validateURL,
            trigger: "blur",
          },
        ],
        // deptId: [{ required: true, message: '请选择组织', trigger: 'blur' }],
        // schema: [{ required: true, message: "请选择协议", trigger: "change" }],
        // domain: [
        //   {
        //     required: true,
        //     pattern: /^((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]\d)|\d)(\.((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]\d)|\d)){3}$|^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}$/,
        //     message: '请输入正确的域名或者ip',
        //     trigger: 'blur',
        //   },
        // ],
        // port: [{ required: true, message: "请输入端口", trigger: "blur" }],
        // path: [{ required: true, message: "请输入访问路径", trigger: "blur" }],
        // sensitiveList: [
        //   {required: true, message: "请选择敏感标识", trigger: "change"},
        // ],
        contentType: [
          { required: true, message: "请选择参数格式", trigger: "change" },
        ],
        method: [{ required: true, message: "请选择方法", trigger: "change" }],
        // type: [
        //   { required: true, message: "请选择敏感数据接口", trigger: "change" },
        // ],
        limitFlow: [
          { type: "number", min: 1, message: "限流值最小为1", trigger: "blur" },
        ],
      },
      parameterFormatData: [
        {
          label: "json",
          value: "application/json",
        },
        {
          label: "x-www-form-urlencoded",
          value: "application/x-www-form-urlencoded",
        },
      ],
      flowAnalysisPath: "/nacos/v1/ns/instance/list",

      statusList: [
        { label: "已上线", value: 1 },
        { label: "已下线", value: 0 },
      ],
      isDisabled: false,
      deptSelectArr: [],
      deptListParams: [],
      selectLoading: false,
      queryInfo: {
        applicationName: null,
        pageNum: 1,
        pageSize: 10,
      },
      initDataList: [],
      applitionTreeData: [],
      treeLoading: true,
      currentNodeKey: "",
      isRequest: false,
    };
  },

  computed: {
    ...mapGetters(["isAdmin", "name"]),
  },

  watch: {
    // 根据名称筛选组织树
    assetGroupName(val) {
      this.$refs.tree.filter(val);
    },
    // applicationValue: {
    //   handler(val) {
    //     this.form.applicationValue = val[1];
    //     this.getIp(val[1]);
    //   },
    //   immediate: true,
    // },
  },
  created() {
    this.getDataTypeList();
    this.listSensitive();
    this.getTreeselect();
    this.getSensitiveRule();
    // this.listLication();
    this.querySensitive();
    this.queryLevel();
    this.queryTag();
    this.queryType();
    this.getApplicationList();
    // this.getList();
  },

  methods: {
    goBackUrl() {
      this.urlDetailShow = false;
      this.$emit("changeTitle", true);
    },
    submitDialog(info) {
      this.form.applicationValue = info.id;
      this.form.showApplicationName = info.applicationName;
    },
    clearInfo() {
      this.form.applicationValue = "";
      this.form.showApplicationName = "";
    },
    // 上拉加载
    loadMore() {
      this.queryInfo.pageNum++;
      this.listLication();
    },
    focus(val) {
      if (!this.queryParams.aplManageId) {
        this.initDataList = this.listLicationList;
      }
    },
    blur() {
      this.queryInfo.pageNum = 1;
      this.queryInfo.applicationName = null;
    },
    // 下拉框远程搜索
    remoteMethod(query) {
      this.queryInfo.applicationName = query;
      this.queryInfo.pageNum = 1;
      this.listLication("search", this.queryInfo);
    },
    getCheckedDeptId(val) {
      this.form.deptId = val;
    },
    getDeptName(val) {
      let dept = this.singleDeptList.find((item) => item.id === val.toString());
      if (dept) return getFullDept(dept.fulllabel);
    },
    urlClick(row) {
      this.$router.push({
        path: "/safe/traceabilityDetails",
        query: { url: row },
      });
    },
    isLimitFlowChange(row) {
      if (row === "1") {
        this.LimitForm.limitFlow = null;
      }
    },
    currentLimiting(row) {
      if (row.passSource === "旁路") {
        this.$GlobalErrorConfirm("警告", "旁路资产不能限流").then(() => {});
        return;
      }
      this.isVisible = true;
      this.LimitForm.id = row.id;
      this.LimitForm.isLimitFlow = row.isLimitFlow.toString();
      if (this.LimitForm.isLimitFlow === "1") {
        this.LimitForm.limitFlow = null;
      } else {
        this.LimitForm.limitFlow = row.limitFlow;
      }
    },
    Limitsubmit() {
      this.$refs["LimitForm"].validate((valid) => {
        if (valid) {
          this.limitLoading = true;
          const params = {
            id: this.LimitForm.id,
            isLimitFlow: this.LimitForm.isLimitFlow,
            limitFlow: this.LimitForm.limitFlow,
          };
          if (this.LimitForm.isLimitFlow === "0") {
            limitFlow(params)
              .then((res) => {
                if (res && res.code === 200) {
                  this.$GlobalSuccessMessage("限流成功");
                  this.getList();
                  this.isVisible = false;
                } else {
                  this.$GlobalErrorConfirm("限流失败", res.msg);
                }
              })
              .finally(() => {
                this.limitLoading = false;
              });
          } else {
            this.LimitForm.limitFlow = null;
            limitFlow(params)
              .then((res) => {
                if (res && res.code === 200) {
                  this.$GlobalSuccessMessage("提交成功");
                  this.isVisible = false;
                  this.getList();
                } else {
                  this.$GlobalErrorConfirm("提交失败", res.msg);
                }
              })
              .finally(() => {
                this.limitLoading = false;
              });
          }
        }
      });
    },

    closeDialog() {
      this.isVisible = false;
    },
    moreTool(row, operate) {
      if (operate === "queryInfo") {
        this.getInterface(row, 2);
      }
      if (operate === "edit") {
        this.handleUpdate(row);
      }
      if (operate === "delete") {
        this.handleDelete(row);
      }
      if (operate === "manualEdit") {
        this.handleManualEdit(row);
      }
      if (operate === "viewSensitive") {
        this.handleViewSensitive(row);
      }
      if (operate === "viewDetail") {
        this.handleViewDetail(row);
      }
    },
    manualsubmit() {
      this.$refs["manualForm"].validate((valid) => {
        if (valid) {
          this.manualLoading = true;
          if (this.isdistinguishStyle === 1 && this.isdistinguishRemark === 1) {
            this.manualLoading = false;
            this.manualOpen = false;
            return;
          } else {
            if (this.manualForm.manualType !== null) {
              this.isdistinguishStyle = 1;
            }

            if (this.manualForm.manualTag !== null) {
              this.isdistinguishRemark = 1;
            }
          }

          let manualInterfaceSensitiveRuleLis = [];
          this.manualForm.manualInterfaceSensitiveRuleList.forEach((item) => {
            manualInterfaceSensitiveRuleLis.push({ workId: item });
          });
          let manualInterfaceTagsList = [];
          this.manualForm.manualInterfaceTagsList.forEach((item) => {
            manualInterfaceTagsList.push({ tagId: item });
          });
          let manualForm = {
            id: this.manualId,
            distinguishStyle: this.isdistinguishStyle,
            distinguishRemark: this.isdistinguishRemark,
            manualType: this.manualForm.manualType,
            manualTag: this.manualForm.manualTag,
            manualInterfaceSensitiveRuleList: manualInterfaceSensitiveRuleLis,
            manualInterfaceTagsList: manualInterfaceTagsList,
          };
          manualReview(manualForm)
            .then((res) => {
              if (res && res.code === 200) {
                this.$GlobalSuccessMessage("人工编辑成功");
                this.manualOpen = false;
                this.getList();
              } else {
                this.$GlobalErrorConfirm("人工编辑失败", res.msg);
              }
            })
            .finally(() => {
              this.manualLoading = false;
            });
        }
      });
    },
    handleManualEdit(row) {
      getInterface({ id: row.id }).then((res) => {
        this.isdistinguishStyle = res.data.distinguishStyle;
        this.isdistinguishRemark = res.data.distinguishRemark;
      });
      this.manualId = row.id;
      this.manualForm.manualInterfaceSensitiveRuleList = [];
      this.manualForm.manualInterfaceTagsList = [];
      let sensitiveId = [];
      let sensitive = [];
      let tagId = [];
      let tag = [];
      row.interfaceSensitiveRuleList.forEach((item) => {
        sensitiveId.push(parseInt(item.workId));
      });
      this.querySensitiveList.forEach((item) => {
        if (sensitiveId.includes(item.wordId)) {
          sensitive.push(item.name);
        }
      });
      row.interfaceDataTagsList.forEach((item) => {
        tagId.push(parseInt(item.tagId));
      });
      this.queryTagList.forEach((item) => {
        if (tagId.includes(item.tagId)) {
          tag.push(item.tagName);
        }
      });
      this.manualForm.interfaceDataTagsList = tag.join(",");
      this.manualForm.interfaceSensitiveRuleList = sensitive.join(",");
      this.manualOpen = true;
    },
    handleViewSensitive(row) {
      this.$refs.sensitiveExample.show(row.interfaceSensitiveRuleList || []);
    },
    handleViewDetail(row) {
      this.$emit("changeTitle", false);
      this.urlDetailShow = true;
      this.detailUrl = row.url;
    },
    querySensitive() {
      querySensitiveList().then((res) => {
        if (res && res.code === 200) {
          this.querySensitiveList = res.data.data;
        } else {
          this.querySensitiveList = [];
        }
      });
    },
    queryLevel() {
      queryLevelList().then((res) => {
        if (res && res.code === 200) {
          this.queryLevelList = res.data.data;
        } else {
          this.queryLevelList = [];
        }
      });
    },
    queryTag() {
      queryTagList().then((res) => {
        if (res && res.code === 200) {
          this.queryTagList = res.data.data;
        } else {
          this.queryTagList = [];
        }
      });
    },
    queryType() {
      queryTypeList().then((res) => {
        if (res && res.code === 200) {
          this.queryTypeList = res.data.data;
        } else {
          this.queryTypeList = [];
        }
      });
    },
    paramsHandleChange(value) {
      this.queryParams.serverId = [];
      value.forEach((item) => {
        this.queryParams.serverId.push(item[1]);
      });
    },
    handleChange(value) {
      this.aplManageId = value[0];
      this.serverId = value[1];
      this.applicationList = [];
      this.applicationList.push({
        aplManageId: this.aplManageId,
        serverId: this.serverId,
      });
      this.getIp(value[1]);
    },
    getIp(serverId) {
      getIp({ serverId: serverId }).then((res) => {
        if (res && res.code === 200) {
          this.form.url = res.data.ip;
        } else {
          this.form.url = "";
        }
      });
    },
    listLication(type, params) {
      if (type === "search") this.selectLoading = true;
      let queryParams = params ? params : this.queryInfo;
      listLication(queryParams)
        .then((res) => {
          if (res && res.code === 200) {
            // this.listLicationList = res.rows;
            if (!this.listLicationList.length) {
              this.listLicationList = [...this.listLicationList, ...res.rows];
            }
            if (type === "search") {
              this.initDataList = res.rows;
            } else {
              if (res.rows.length > 0) {
                this.initDataList = [...this.initDataList, ...res.rows];
              }
            }
          } else {
            this.listLicationList = [];
          }
        })
        .finally(() => (this.selectLoading = false));

      // if (type === 'search') this.selectLoading = true
      // let queryParams = params ? params : this.queryParamsForOption
      // selectListByUrl(queryParams)
      //     .then((res) => {
      //       if (res && res.code === 200) {
      //         if (!this.initUrlData.length) {
      //           this.initUrlData = [...this.initUrlData, ...res.rows]
      //         }
      //         if (type === 'search') {
      //           this.urlOptions = res.rows
      //         } else {
      //           if (res.rows.length > 0) {
      //             this.urlOptions = [...this.urlOptions, ...res.rows]
      //           }
      //         }
      //       } else {
      //         this.initUrlData = []
      //       }
      //     })
      //     .finally(() => (this.selectLoading = false))
      //
    },
    getDataTypeList() {
      queryDataTypeTreeList().then((res) => {
        if (res && res.code === 200) {
          this.dataTypeList = res.data.data;
        } else {
          this.dataTypeList = [];
        }
      });
    },
    getList() {
      this.loading = true;
      this.queryParams.orgId = this.currentNodeKey;

      const params = Object.assign({}, this.queryParams, {
        flagSensitive: this.queryParams.flagSensitive,
        orgId: this.orgId,
        aplManageId: this.appId,
      });
      listInterface(params).then((res) => {
        this.loading = false;
        if (res && res.code === 200) {
          this.interfaceList = res.rows;
          this.interfaceList.forEach((item) => {
            let querySensitive = [];
            let queryTag = [];
            let queryLevel = [];
            let queryType = [];
            let workId = [];
            let levelId = [];
            let typeId = [];
            let tagId = [];
            let workReqId = [];
            let querySensitiveReq = [];
            if (
              item.interfaceApplicationList &&
              item.interfaceApplicationList.length
            ) {
              item.applicationValue =
                item.interfaceApplicationList[0].applicationName;
            } else {
              item.applicationValue = "";
            }

            if (
              item.interfaceSensitiveRuleList &&
              item.interfaceSensitiveRuleList.length
            ) {
              item.interfaceSensitiveRuleList.forEach((item) => {
                workId.push(item.workId);
              });
              this.querySensitiveList.forEach((item) => {
                if (workId.includes(item.wordId.toString())) {
                  return querySensitive.push(item.name);
                }
              });
            }
            if (
              item.interfaceDataTagsList &&
              item.interfaceDataTagsList.length
            ) {
              item.interfaceDataTagsList.forEach((item) => {
                tagId.push(item.tagId);
              });
              this.queryTagList.forEach((item) => {
                if (tagId.includes(item.tagId.toString())) {
                  return queryTag.push(item.tagName);
                }
              });
            }
            if (
              item.interfaceDataLevelList &&
              item.interfaceDataLevelList.length
            ) {
              item.interfaceDataLevelList.forEach((item) => {
                levelId.push(item.levelId);
              });
              this.queryLevelList.forEach((item) => {
                if (levelId.includes(item.levelId.toString())) {
                  return queryLevel.push(item.name);
                }
              });
            }
            if (
              item.interfaceDataTypeList &&
              item.interfaceDataTypeList.length
            ) {
              item.interfaceDataTypeList.forEach((item) => {
                typeId.push(item.typeId);
              });
              this.queryTypeList.forEach((item) => {
                if (typeId.includes(item.typeId.toString())) {
                  return queryType.push(item.typeName);
                }
              });
            }
            if (
              item.interfaceReqSensitiveRuleList &&
              item.interfaceReqSensitiveRuleList.length
            ) {
              item.interfaceReqSensitiveRuleList.forEach((item) => {
                workReqId.push(item.workReqId);
              });
              this.querySensitiveList.forEach((item) => {
                if (workReqId.includes(item.wordId.toString())) {
                  return querySensitiveReq.push(item.name);
                }
              });
            }
            item.querySensitiveReq = querySensitiveReq.join(",");
            // item.querySensitive = querySensitive.join(",");
            item.querySensitive = querySensitive;
            item.queryLevel = queryLevel.join(",");
            item.queryType = queryType.join(",");
            item.queryTag = queryTag.join(",");
            item.deptName = this.getDeptName(item.deptId || "");
          });

          if (this.interfaceList.length > 0) {
            this.interfaceList.map((user) => {
              user.url = user.url;
              return user;
            });
          }
          //this.interfaceList.forEach(item->{item.url= encode(item.url)});
          this.total = res.total;
        } else {
          this.interfaceList = [];
          this.total = 0;
          this.handleListTips(res);
        }
      });
    },

    listSensitive(v) {
      const params = {
        sensitiveName: v,
      };
      listSensitive(params).then((res) => {
        if (res && res.code === 200) {
          this.listSensitArr = res.data;
        } else {
          this.listSensitArr = [];
        }
      });
    },

    /** 查询组织下拉树结构 */
    getTreeselect() {
      const params = {
        name: undefined,
        status: 0,
        delFlag: 0,
      };
      treeselect(params).then((res) => {
        let datachildren = [];
        // console.log("原始数据", res.data);
        if (res && res.code === 200 && res.data && res.data.length) {
          this.assetGroupArr = res.data;
          res.data.map((v) => {
            datachildren.push({
              id: v.id,
              label: v.name,
            });
          });
        } else {
          this.assetGroupArr = [];
        }
        // console.log("处理后的数据", datachildren);
        this.deptOptions = datachildren;
        // console.log("树形数据", this.deptOptions);

        this.datachildren = datachildren;
      });
    },
    matchingFn(id) {
      let name = "";
      this.assetGroupArr && this.assetGroupArr.length
        ? this.assetGroupArr.map((v) => {
            if (v.id === id) {
              name = v.name;
            }
          })
        : null;
      return name;
    },
    /** 敏感标识下拉列表 */
    getSensitiveRule() {
      // const params = {
      //   name : this.assetGroupName,
      //   status: 0,
      //   delFlag: 0,
      // }
      getSensitiveRule().then((res) => {
        let datachildren = [];
        if (res && res.code === 200 && res.data && res.data.length) {
          this.sensitiveRuleArr = res.data;
        } else {
          this.sensitiveRuleArr = [];
        }
      });
    },
    formateFn(arr, key) {
      let newArr = [];
      if (arr && arr.length) {
        arr.map((v) => {
          newArr.push(v[key]);
        });
      }
      return newArr.join(";");
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.assetGroup = data.node.id;
      // this.queryParams.domainId = data.node.id;
      this.getList();
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleBatchTrafficAnalysis(item) {
      this.$emit("changeTitle", false);
      this.analysisPath = item.url;
      this.analysisId = item.id;
      this.flowAnalysisDiv = true;
    },
    changeFlowAnalysisDiv() {
      this.flowAnalysisDiv = false;
      this.$emit("changeTitle", true);
    },

    addParamsFn() {
      // 新增参数条数
      this.butOpen = true;
      this.addParamsArr.push(1);
    },
    deleteParamsFn(i) {
      this.addParamsArr.splice(i, 1);
      this.paramType.splice(i, 1);
      this.paramValue.splice(i, 1);
      if (this.addParamsArr && this.addParamsArr.length === 1) {
        this.butOpen = false;
      }
    },
    // 取消按钮
    cancel() {
      this.manualForm.manualType = null;
      this.manualForm.manualTag = null;
      this.open = false;
      this.batchUpdateOpen = false;
      this.detailsOpen = false;
      this.reset();
      this.reParams();
      this.manualOpen = false;
      this.applicationList = [];
    },
    reParams() {
      this.paramType = [];
      this.paramValue = [];
      this.addParamsArr = [1];
    },
    // 表单重置
    reset() {
      this.form = {
        url: null,
        applicationValue: null,
        id: null,
        manuCode: null,
        systemCode: null,
        apiName: null,
        domainId: null,
        schema: null,
        domain: null,
        port: null,
        path: null,
        sensitiveList: [],
        method: null,
        auth: 0,
        description: null,
        serverId: null,
        querySensitiveId: null,
        querySensitive: null,
        queryTagId: null,
        queryTag: null,
        currentVisits: 0,
        queryLevelId: null,
        queryLevel: null,
        interfaceSensitiveRuleList: [],
        deptId: null,
        showApplicationName: null,
        // query: null,
        // apiName: null,
        // fingerprint: null,
        // status: 0,
        // createBy: null,
        // createTime: null,
        // updateBy: null,
        // updateTime: null,
      };
      this.resetForm("form");
    },
    /** 查询按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = this.$options.data().queryParams;
      this.$refs.commonDept.clearDept();
      // this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.selectionArr = selection;
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    changeHttpFn(v) {
      if (v === "http") {
        this.form.port = 80;
      } else {
        this.form.port = 443;
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.infoUpdateLoading = false;
      this.reset();
      this.reParams();
      // this.getTreeselect();
      this.open = true;
      this.title = "注册API资产";
      if (this.assetGroup) {
        // this.form.domainId = this.assetGroup;
      }

      this.form.applicationValue = this.selectForm?.appId || "";
      this.form.showApplicationName = this.selectForm?.appName || "";
      this.isDisabled = false;
    },

    /** 编辑按钮操作 */
    handleUpdate(row) {
      this.isDisabled = false;
      this.reset();
      this.reParams();
      // this.getTreeselect();
      this.getInterface(row, 1);
    },
    getInterface(row, n) {
      // 1:编辑  2：详情

      const id = row.id || this.ids;
      if (n !== 1) {
        this.infoLoading = true;
        this.detailsOpen = true;
        this.detailsTitle = "API资产详情";
      } else {
        this.infoUpdateLoading = true;
        this.open = true;
        this.title = "编辑API资产";
      }
      getInterface({ id }).then((res) => {
        if (res && res.code === 200) {
          let tag = [];
          let tagId = [];
          let sensitiveId = [];
          let sensitive = [];
          res.data.interfaceSensitiveRuleList.forEach((item) => {
            sensitiveId.push(parseInt(item.workId));
          });
          this.querySensitiveList.forEach((item) => {
            if (sensitiveId.includes(item.wordId)) {
              sensitive = sensitiveId;
            }
          });
          res.data.interfaceDataTagsList.forEach((item) => {
            tagId.push(parseInt(item.tagId));
          });
          this.queryTagList.forEach((item) => {
            if (tagId.includes(item.tagId)) {
              tag = tagId;
            }
          });

          this.form = Object.assign(res.data, {
            querySensitive:
              res.data.interfaceSensitiveRuleList &&
              res.data.interfaceSensitiveRuleList.length
                ? sensitive
                : [],
            queryLevel:
              res.data.interfaceDataLevelList &&
              res.data.interfaceDataLevelList.length
                ? parseInt(res.data.interfaceDataLevelList[0].levelId)
                : null,
            queryType:
              res.data.interfaceDataTypeList &&
              res.data.interfaceDataTypeList.length
                ? parseInt(res.data.interfaceDataTypeList[0].typeId)
                : null,
            queryTag:
              res.data.interfaceDataTagsList &&
              res.data.interfaceDataTagsList.length
                ? tag
                : [],
            applicationValue:
              res.data.interfaceApplicationList &&
              res.data.interfaceApplicationList.length
                ? row.interfaceApplicationList[0].aplManageId
                : "",
          });

          (this.form.showApplicationName =
            res.data.interfaceApplicationList &&
            res.data.interfaceApplicationList.length
              ? row.interfaceApplicationList[0].applicationName
              : ""),
            //   // if (this.form.interfaceSensitiveRuleList.length) {
            //   //   this.form.querySensitive = Number(
            //   //     res.data.interfaceSensitiveRuleList[0].workId
            //   //   );

            //   // }
            // if (
            //   this.form.interfaceApplicationList &&
            //   this.form.interfaceApplicationList.length
            // ) {
            //   this.form.applicationValue =
            //     row.interfaceApplicationList[0].aplManageId;
            // }

            (this.isDisabled = res.data.passSource !== "手工添加");
          if (
            res.data &&
            res.data.queryForEditShow &&
            this.isJson(res.data.queryForEditShow)
          ) {
            let paramList = JSON.parse(res.data.queryForEditShow);
            this.addParamsArr = [];
            paramList && paramList.length
              ? paramList.map((v) => {
                  this.addParamsArr.push(1);
                  this.paramType.push(v.paramType);
                  this.paramValue.push(v.paramValue);
                })
              : null;
          }
          if (n !== 1) {
            this.form.queryTag = row.queryTag;
            this.form.queryLevel = row.queryLevel;
            this.form.queryType = row.queryType;
            // this.from.url = row.url;
            this.form.querySensitive =
              row.querySensitive.length === 0
                ? ""
                : row.querySensitive.join(",");

            this.form.applicationValue = row.applicationValue;
            this.form.currentVisits = res.data.currentVisits;
            this.form.querySensitiveReq = row.querySensitiveReq;

            let index = this.parameterFormatData.findIndex(
              (f) => f.value === this.form.contentType
            );
            if (index > -1) {
              this.form.contentTypeName = this.parameterFormatData[index].label;
            }
            this.url = row.url;
          }

          this.form.deptName = this.getDeptName(this.form.deptId || "");
          this.infoLoading = false;
          this.infoUpdateLoading = false;

          this.form.phone = res.data.phoneNumber
            ? Utils.phoneEncryption(decode(res.data.phoneNumber))
            : "";
        } else {
          this.$GlobalErrorConfirm("获取信息失败", res.msg, "重新加载").then(
            () => {
              this.getInterface(row, n);
            }
          );
        }
      });
    },
    isJson(str) {
      if (typeof str == "string") {
        try {
          var obj = JSON.parse(str);
          if (typeof obj == "object" && obj) {
            return true;
          } else {
            return false;
          }
        } catch (e) {
          return false;
        }
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.form.interfaceSensitiveRuleList = [];
      this.form.interfaceDataLevelList = [];
      this.form.interfaceDataTypeList = [];
      this.form.interfaceDataTagsList = [];
      if (this.form.querySensitive != null) {
        this.form.querySensitive.forEach((item) => {
          this.form.interfaceSensitiveRuleList.push({
            workId: item,
          });
        });
      }
      if (this.form.queryLevel != null) {
        this.form.interfaceDataLevelList.push({
          levelId: this.form.queryLevel,
        });
      }
      if (this.form.queryType != null) {
        this.form.interfaceDataTypeList.push({
          typeId: this.form.queryType,
        });
      }
      if (this.form.queryTag != null) {
        this.form.queryTag.forEach((item) => {
          this.form.interfaceDataTagsList.push({
            tagId: item,
          });
        });
      }
      this.form.applicationList = [];
      this.form.applicationList.push({
        aplManageId: this.form.applicationValue,
      });
      this.$refs["form"].validate((valid) => {
        let paramList = [];
        this.paramType && this.paramType.length
          ? this.paramType.map((v, i) => {
              paramList.push({
                paramType: this.paramType[i],
                paramValue: this.paramValue[i],
              });
            })
          : null;
        let newFormParams = Object.assign({}, this.form, { paramList });

        if (valid) {
          let type1 = [...this.paramType];
          let value1 = [...this.paramValue];
          let canDo = true;
          type1.map((v, i) => {
            if ((v && !value1[i]) || (!v && value1[i])) {
              canDo = false;
            }
          });
          if (type1.length !== value1.length) {
            this.$GlobalErrorConfirm("提示", "参数类型和值必须同时存在");
            return;
          }
          if (!canDo) {
            this.$GlobalErrorConfirm("提示", "参数类型和值必须同时存在");
            return;
          }
          this.buttonLoading = true;
          if (this.form.id != null) {
            updateInterface(newFormParams)
              .then((res) => {
                if (res && res.code === 200) {
                  this.$GlobalSuccessMessage("编辑成功");
                  this.open = false;
                  this.getList();
                } else {
                  this.$GlobalErrorConfirm("编辑失败", res.msg);
                }
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          } else {
            addInterface(newFormParams)
              .then((res) => {
                if (res && res.code === 200) {
                  this.$GlobalSuccessMessage("注册成功");
                  this.open = false;
                  this.getList();
                } else {
                  this.$GlobalErrorConfirm("注册失败", res.msg);
                }
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          }
        }
      });
    },
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$GlobalDeleteConfirm("是否确认删除数据项?")
        .then(() => {
          delInterface({ ids: row.id ? row.id : ids.join(",") }).then((res) => {
            if (res && res.code == 200) {
              // this.queryParams.pageNum = 1;
              this.getList();
              this.$GlobalSuccessMessage("删除成功");
              if (
                this.queryParams.pageNum > 1 &&
                ids.split(",").length === this.list.length
              ) {
                this.queryParams.pageNum -= 1;
              }
            } else {
              this.$GlobalErrorConfirm("删除失败", res.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 批量上线、下线
    batchEdit(row, status) {
      const ids = row.id || this.ids;
      if (this.ids) {
        let flag = this.selectionArr.filter((item) => item.status === status);
        if (flag.length) {
          this.$GlobalErrorConfirm(
            "警告",
            `已选列中存在已${status === 1 ? "上" : "下"}线状态的资产`
          ).then(() => {});
          return;
        }
      }

      const params = {
        ids: row.id ? row.id : ids.join(","),
        status,
      };

      if (status === 0) {
        if (row.passSource === "旁路") {
          this.$GlobalErrorConfirm("警告", "旁路资产不能下线").then(() => {});
          return;
        }
        this.$GlobalDeleteConfirm("已下线的资产将无法访问")
          .then(() => {
            batchEdit(params).then((res) => {
              if (res && res.code === 200) {
                this.getList();
                this.$GlobalSuccessMessage(res.msg);
              } else {
                this.$GlobalErrorConfirm("下线失败", res.msg);
              }
            });
          })
          .catch(() => {});
      } else {
        batchEdit(params).then((res) => {
          if (res && res.code === 200) {
            this.getList();
            this.$GlobalSuccessMessage(res.msg);
          } else {
            this.$GlobalErrorConfirm("上线失败", res.msg);
          }
        });
      }
    },
    //批量分组
    batchUpdate() {
      this.batchUpdateOpen = true;
      this.batchUpdateTitle = "批量分组";
    },
    batchSubmission() {
      batchUpdate({
        ids: this.ids.join(","),
        // domainId: this.batchUpdateForm.domainId,
      }).then((res) => {
        if (res && res.code === 200) {
          this.$GlobalSuccessMessage("分组成功");
          this.batchUpdateOpen = false;
          this.getList();
        } else {
          this.$GlobalErrorConfirm("分组失败", res.msg);
        }
      });
    },
    importShow() {
      this.$refs.uploadDialog.show();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.$GlobalErrorConfirm(
        "提示",
        "正在导出,请不要退出页面!",

        "确定",
        "warning"
      );
      this.exportLoading = true;
      this.download(
        "system/apiinterface/export",
        {
          ...this.queryParams,
          flagSensitive: this.queryParams.flagSensitive,
          pageSize: 10000,
        },
        `资产管理_${new Date().getTime()}.xlsx`,
        900000
      ).then(() => {
        this.exportLoading = false;
        MessageBox.close(false);
      });
    },

    HandleDistributeOrg() {
      // let includeDistributeOrg = this.interfaceList.find((v) => {
      //   return this.ids.includes(v.id) && v.deptId;
      // });
      // if (includeDistributeOrg) {
      //   this.$GlobalErrorConfirm("分配失败", "包含已分配组织的数据");
      //   return;
      // }
      this.dialogShow = true;
      this.$refs.distributeOrg.show();
    },

    toDistributeOrg(val) {
      if (val) {
        this.submitOrgLoading = true;
        updateDeptId({ ids: this.ids, deptId: val })
          .then((res) => {
            if (res && res.code === 200) {
              this.$GlobalSuccessMessage("分配成功");
              this.dialogShow = false;
              this.getList();
            } else {
              this.$GlobalErrorConfirm("分配失败", res.msg);
            }
          })
          .catch((err) => {
            this.$GlobalErrorConfirm("分配失败", err.msg);
          })
          .finally(() => {
            this.submitOrgLoading = false;
          });
      } else {
        this.$GlobalErrorConfirm("分配失败", "请选择组织");
      }
    },

    setDisabledOption(data) {
      if (data.length > 0) {
        data.forEach((f) => {
          f.disabled = f.freeze !== "N";
          if (f.children && f.children.length > 0) {
            this.setDisabledOption(f.children);
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.tree-item-wrap {
  display: flex;
  align-items: center;
  width: 100%;

  &:hover {
    .iconfont {
      opacity: 1;
    }
  }

  .iconfont {
    opacity: 0;
    transition: opacity 0.15s linear;
  }
}

.manualDialog {
  ::v-deep .global-common-edit-dialog-body {
    background-color: #fff;
    padding: 0;
  }

  .manualClass {
    border-bottom: 1px solid #eee;
    margin: 0;

    ::v-deep .el-form-item__label {
      background-color: #f5f5f5;
      padding: 0px 0 7px 0;
    }

    ::v-deep .el-form-item__content {
      padding-left: 8px;
      background-color: #fff;
    }

    ::v-deep .el-input__inner {
      border: #eee;
      padding-left: 0px;
    }

    ::v-deep .el-tag {
      margin: 0 2px 0 0;
    }
  }
}

.paramsList {
  display: flex;
  margin-bottom: 10px;
  align-items: center;

  .delectCurrentParam {
    font-size: 16px;
    margin-left: 10px;
    cursor: pointer;
    position: relative;
    right: 0;
  }

  ::v-deep .el-input-group__prepend {
    background: #fff;
  }
}

.isDisabled {
  ::v-deep .el-input-group__prepend {
    background: #f5f7fa;
  }
}

.tools-switch {
  color: #606266;
  font-size: 14px;
  margin-top: 18px;

  .t-s-label {
    margin-right: 4px;
  }

  .t-s-tips {
    margin-left: 12px;
  }
}

.tree-data-wrap {
  margin-top: 8px;
  max-height: calc(100% - 40px);
  overflow-y: scroll;
}

.icon-piliangfenzu {
  font-size: 12px !important;

  ::v-deep span {
    margin-left: 5px;
  }
}

.el-cascader {
  display: block;
}

::v-deep .application-list {
  .el-cascader-menu {
    .el-cascader-node__label {
      max-width: 190px;
    }
  }
}

.el-dropdown-link {
  color: var(--theme-color);
}

//::v-deep .el-dropdown-menu{
//  .el-dropdown-menu__item{
//    font-size: 12px !important;
//  }
//}
</style>
